import { ProColumns, ProFormInstance, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Modal } from 'antd';
import React, { useEffect, useRef } from 'react';

export type Props = {
  oldData: API.Book;
  columns: ProColumns<API.Book>[];
  onCancel: () => void;
  onSubmit: (values: API.Book) => Promise<void>;
  visible: boolean;
};

const UpdateModal: React.FC<Props> = (props) => {
  const { oldData, columns, onCancel, onSubmit, visible } = props;

  const formRef = useRef<ProFormInstance>();

  // 设置行数据
  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(oldData);
    }
  }, [oldData]);

  return (
    <Modal
      visible={visible}
      footer={null}
      onCancel={() => {
        onCancel?.();
      }}
    >
      <ProTable
        type="form"
        formRef={formRef}
        columns={columns}
        onSubmit={async (value) => {
          onSubmit?.(value);
        }}
      />
    </Modal>
  );
};
export default UpdateModal;
